import React, { useEffect, useState } from "react";
import { NavBar, Space, Image, SpinLoading, Mask } from "antd-mobile";
import { SearchOutline, TruckOutline } from "antd-mobile-icons";
import { useNavigate, useParams } from "react-router-dom";
import { Rankings, RankingsArr } from "@/api/Ranking";
import style from "./Ranking.module.scss";

const Ranking = () => {
  // 跳转函数
  const navigate = useNavigate();

  // 当前点击的索引
  const [idxs, setIdxs] = useState(0);

  // 获取路由信息
  let { id }: any = useParams();
  // 自定义头部右侧区域
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline />
        <TruckOutline />
      </Space>
    </div>
  );
  // 头部左侧区域点击函数
  const back = () => {
    // 跳转回主页
    navigate("/");
  };

  // 接收类别数据
  const [Ranking, setRanking] = useState<any>({});

  // 接收详细数据
  const [RankingArr, setRankingArr] = useState<any>({});

  // 用于控制蒙层的状态开关
  const [visible, setVisible] = useState(false);

  // 发送请求获取列表数据
  useEffect(() => {
    // 开启蒙层
    setVisible(true);
    Rankings(id).then((res) => {
      if (res.status === 200) {
        // 关闭蒙层
        setVisible(false);
        setRanking(res.data);
      }
    });
  }, []);

  // 发送请求获取详细数据
  useEffect(() => {
    // 开启蒙层
    setVisible(true);
    RankingsArr(id).then((res) => {
      if (res.data.code === "200") {
        // 关闭蒙层
        setVisible(false);
        setRankingArr(res.data.data.itemList);
      }
    });
  }, []);

  // const [nweArr, setNweArr] = useState<any>([]);
  // const nweArr = [...RankingArr, ...Ranking.currentCategory.subCateList];

  return (
    <div>
      {/* 头部NavBar */}
      <NavBar right={right} onBack={back}>
        网易严选
      </NavBar>
      {/* 榜单图 */}
      {Ranking.bannerList &&
        Ranking.bannerList.map((val: any) => {
          return <Image src={val.picUrl} key={val.picUrl} />;
        })}
      {/* 类别选择列表 */}
      <div className={style.category}>
        <div className={style.category_s}>
          <ul>
            {Ranking.currentCategory &&
              [{ name: "全部" }, ...Ranking.currentCategory.subCateList].map(
                (val: any, idx: number) => {
                  return (
                    <li
                      key={idx}
                      className={idxs === idx ? style.li_s : ""}
                      onClick={(e) => {
                        setIdxs(idx);
                        console.log(e);
                      }}
                    >
                      {val.name}
                    </li>
                  );
                }
              )}
          </ul>
        </div>
      </div>
      {/* 详细数据 */}
      <div className={style.big}>
        {!!RankingArr.length &&
          RankingArr.map((val: any) => {
            return (
              <div key={val.id} className={style.bigList}>
                <div className={style.top}>
                  <div className={style.left}>
                    <Image src={val.listPicUrl} width={124} />
                  </div>
                  <div className={style.right}>
                    <div className={style.name}>
                      <Image
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"
                        width={30}
                        height={20}
                        style={{ marginRight: 15 }}
                      />
                      {val.name}
                    </div>
                    <div className={style.good}>好评率{val.goodCmtRate}</div>
                    {val.itemTagList.length === 0
                      ? false
                      : true && <span className={style.red}>可用红包</span>}
                    <div className={style.price}>
                      <span className={style.rPrice}>￥{val.retailPrice}</span>
                      <span className={style.cPrice}>￥{val.counterPrice}</span>
                      <span className={style.saleCart}>马上抢</span>
                    </div>
                  </div>
                </div>
                <div className={style.bottom}>
                  <Image
                    src="https://yanxuan.nosdn.127.net/dc741fe90df58c3605c9d3c309dba9e0.png?quality=75&type=webp&imageView&thumbnail=39x39"
                    width={18}
                    style={{ float: "left", marginRight: 2 }}
                  />
                  {val.hotSaleListBottomInfo.content}
                </div>
              </div>
            );
          })}
      </div>
      {/* 加载中遮罩层 */}
      <Mask
        color="white"
        visible={visible}
        destroyOnClose
        onMaskClick={() => setVisible(false)}
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <SpinLoading color="primary" />
      </Mask>
    </div>
  );
};

export default Ranking;
